<template>
    <div class="container text-center py-5">
        <img
            :src="isDark ? darkImg : lightImg"
            :alt="isDark ? '404 - Dark' : '404 - Light'"
            class="img-fluid mb-4"
            style="max-width: 400px"
        />
        <h2 class="mb-3">哎呀，页面没找到</h2>
        <p class="text-muted mb-4">可能是链接错误，或者页面已经被移除</p>
        <router-link to="/" class="btn btn-primary">返回首页</router-link>
    </div>
</template>

<script setup>
import { computed } from 'vue';
import { useThemeStore } from '../store/theme';

// 明暗插画路径
const lightImg = 'https://raw.githubusercontent.com/undraw/undraw/master/static/undraw_page_not_found_su7k.svg';
const darkImg = 'https://raw.githubusercontent.com/undraw/undraw/master/static/undraw_dark_mode_2x69.svg';

// 获取主题状态（true 表示暗黑模式）
const isDark = computed(() => useThemeStore().dark);
</script>
